import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:leader_help/page/task/main/models/area/area.dart';
import 'package:leader_help/page/task/main/models/area/area_list.dart';
import 'package:leader_help/page/task/main/models/area/area_item.dart';
import 'package:leader_help/utils/util.dart';

Future showCityPickers({
  required AreaModel areaMod,
  required AreaSelectedModel selectedMod,
  required Function(AreaSelectedModel) onChoosed,
  double left = 0,
  double top = 0,
  double right = 0,
  double height = 200,
  bool needBarrierColor = false,
}) async {
  await Get.dialog(
    Padding(
      padding: EdgeInsets.fromLTRB(left, top, right, 0),
      child: Column(
        children: [
          SizedBox(
            height: height,
            child: CityPickers(
              areaMod: areaMod,
              selectedMod: selectedMod,
              onChoosed: onChoosed,
            ),
          )
        ],
      ),
    ),
    barrierDismissible: true,
    // barrierColor: needBarrierColor ? null : Colors.white.withAlpha(0),
    barrierColor: null,
  );
}

class CityPickers extends StatefulWidget {
  const CityPickers(
      {Key? key,
      required this.areaMod,
      required this.selectedMod,
      required this.onChoosed})
      : super(key: key);
  final AreaModel areaMod;
  final AreaSelectedModel selectedMod;
  final Function(AreaSelectedModel) onChoosed;
  @override
  State<CityPickers> createState() => _CityPickersState();
}

class _CityPickersState extends State<CityPickers> {
  late AreaSelectedModel selectedMod;
  final List<String> areaTitles = ['行政区域', '产业园区'];
  late AreaModel area;

  @override
  void initState() {
    super.initState();
    area = widget.areaMod;
    selectedMod = widget.selectedMod;
  }

  @override
  Widget build(BuildContext context) {
    var _areaItems = selectedMod.areaTitleIndex == 0
        ? selectedMod.city?.areaList
        : selectedMod.city?.industyList;
    return Container(
      decoration: BoxDecoration(
          color: ColorsUtil.bg,
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(5.r))),
      child: Row(
        children: [
          Flexible(
            child: ListView.builder(
              itemCount: area.areaList?.length ?? 0,
              itemBuilder: (context, index) {
                var md = area.areaList![index];
                return InkWell(
                  onTap: () {
                    selectedMod.cityIndex = index;
                    selectedMod.city = area.areaList![index];
                    setState(() {});
                  },
                  child: Container(
                    height: 50.h,
                    color: selectedMod.cityIndex == index
                        ? Colors.white
                        : ColorsUtil.bg,
                    child: Row(
                      children: [
                        selectedMod.cityIndex == index
                            ? Container(
                                width: 4.r,
                                height: 12.h,
                                color: ColorsUtil.red,
                              )
                            : const SizedBox(),
                        SizedBox(
                          width: selectedMod.cityIndex == index ? 6.r : 10.r,
                        ),
                        Text(
                          md.name!,
                          style: TextStyle(
                              color: ColorsUtil.title, fontSize: 14.sp),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          Flexible(
            child: ListView.builder(
              itemCount: areaTitles.length,
              itemBuilder: (context, index) {
                var md = areaTitles[index];
                return InkWell(
                  onTap: () {
                    selectedMod.areaTitleIndex = index;
                    setState(() {});
                  },
                  child: Container(
                    height: 50.h,
                    color: selectedMod.areaTitleIndex == index
                        ? Colors.white
                        : ColorsUtil.bg,
                    child: Row(
                      children: [
                        selectedMod.areaTitleIndex == index
                            ? Container(
                                width: 4.r,
                                height: 12.h,
                                color: ColorsUtil.red,
                              )
                            : const SizedBox(),
                        SizedBox(
                          width:
                              selectedMod.areaTitleIndex == index ? 6.r : 10.r,
                        ),
                        Expanded(
                          child: Text(
                            md,
                            maxLines: 2,
                            style: TextStyle(
                                color: ColorsUtil.title, fontSize: 14.sp),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          Flexible(
            flex: 2,
            child: ListView.builder(
              itemCount: _areaItems?.length ?? 0,
              itemBuilder: (context, index) {
                var md = _areaItems![index];
                return InkWell(
                  onTap: () {
                    selectedMod.areaIndex = index;
                    selectedMod.areaItem = md;
                    widget.onChoosed(selectedMod);
                    Get.back();
                  },
                  child: Container(
                    height: 50.h,
                    padding: EdgeInsets.symmetric(horizontal: 10.r),
                    decoration: const BoxDecoration(
                      color: Colors.white,
                      border: Border(
                        left:
                            BorderSide(color: ColorsUtil.separator, width: 0.5),
                      ),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Flexible(
                          child: Text(
                            md.name!,
                            maxLines: 3,
                            style: TextStyle(
                                color: selectedMod.areaIndex == index
                                    ? ColorsUtil.red
                                    : ColorsUtil.title,
                                fontSize: 14.sp),
                          ),
                        ),
                        selectedMod.areaIndex == index
                            ? Icon(
                                Icons.check,
                                size: 16.r,
                                color: ColorsUtil.red,
                              )
                            : const SizedBox(),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class AreaSelectedModel {
  int cityIndex = 0;
  int areaTitleIndex = 0;
  int areaIndex = 0;
  CityModel? city;
  AreaItemModel? areaItem;

  void initData(AreaModel mod) {
    city = mod.areaList![cityIndex];
    areaItem = city!.areaList![areaIndex];
  }
}
